<template>
    <!-- 页面全局配置 -->
    <view class="pageconfig">
        <!--vuetop-->
        <view class="tab1   ">
            <scroll-view scroll-x class="nav" style="background-color:rgba(255,255,255,1)">
                <view class=" flex justify-around ">
                    <view class="cu-item" :class="index==TabCur1?' text-df text-bold cur':''" :style="{'color':index==TabCur1?'rgba(255,112,162,1)':''}" v-for="(item,index) in label1List" :key="index" @tap="tabSelect1" :data-id="index">
                        {{item.tabname}}
                    </view>
                </view>
            </scroll-view>
            <swiper :current="TabCur1" duration="300" style="height:1600rpx;" @change="changeTab1">
                <swiper-item class="tab-content">
                    <scroll-view style="height:1600rpx;" class="list-scroll-content" scroll-y>
                        <view class="flex3   response  flex  justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                            <view class="flex4  bg-white   flex flex-wrap justify-center  " style="align-content: center;align-items: center;"  v-for="i in 3"  >
                                <text class="text5 "> 直到现在，我还是庆幸遇见你，从遇见你那刻起。就没人能比上你，就没羡慕过任何人。直到现在，你也是我临睡前想的最后一个人，也是我睡醒后想的第一个人，即使在梦里，你也是我最想见的人。直到现在我还是会幻想跟好久不联系的你怎样去重逢，重逢了怎样去爱你。直到现在，我依然觉得挽回你是一件很正确的事，因为是你，我不在期待轰轰烈烈的爱情，不期待甜言语海誓山盟，只希望在以后的日子里，有你的一句不离开，那一切都将值得。我想我是什么时候爱上你的，大概就是在很早的某一天，我忽然发觉，这世上所有温柔与浪漫的事情，都能让我想起你的时候。大概只要有关于你的事，其他的事情就显得那么不重要的时候，爱就已经浮现。我以为差可以填满人生的遗憾，而制造更多遇憾的，偏偏是爱，而我只能在还有你联系方式的时间里，会尽我所能对你好，并不是要你感动，而是想把我最真的爱和温柔给你。</text>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="tab-content">
                    <scroll-view style="height:1600rpx;" class="list-scroll-content" scroll-y>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="tab-content">
                    <scroll-view style="height:1600rpx;" class="list-scroll-content" scroll-y>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="tab-content">
                    <scroll-view style="height:1600rpx;" class="list-scroll-content" scroll-y>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
        <text> 我还是想和你当朋友的</text>

        <!--vuebottom-->
    </view>
</template>

<script>
    import Vue from 'vue'
    export default {
        data() {
            return {
                TabCur1: 0,
                /**single**/
                TabCur1: 0,
                /**single**/

                label1List: [{
                    "id": 2,
                    "expand": true,
                    "name": "选项卡容器一",
                    "tabname": "爱情",
                    "iconname": "",
                    "value": "1",
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器一(ID:2)"
                }, {
                    "id": 6,
                    "expand": true,
                    "name": "选项卡容器二",
                    "tabname": "挽回",
                    "iconname": "",
                    "value": "2",
                    "list": [],
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器二(ID:6)",
                    "children": []
                }, {
                    "id": 7,
                    "expand": true,
                    "name": "选项卡容器三",
                    "tabname": "分手",
                    "iconname": "",
                    "value": "3",
                    "list": [],
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器三(ID:7)",
                    "children": []
                }, {
                    "id": 8,
                    "expand": true,
                    "name": "选项卡容器三",
                    "tabname": "祝福",
                    "iconname": "",
                    "value": "3",
                    "list": [],
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器三(ID:8)",
                    "children": []
                }],
                /**vuejs**/


            };
        },
        onLoad() {


        },
        methods: {


            /**
             *          $vuetag = "";
             *          $vuecss = "";
             *          $vuejs = "";
             *
             */

            tabSelect1(e) {
                this.TabCur1 = e.currentTarget.dataset.id;
            },
            changeTab1(e) {
                this.TabCur1 = e.target.current;
            },
            //获取数据

        }
    }
</script>

<style lang="less">
    /**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




    /**本页全局配置的代码**/
    .pageconfig {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        background-color: rgba(247, 252, 253, 1);
        height: 100vh;
    }



    /**pagedomcss**/


    .flex3 {
        width: 100%;
        width: calc(100% - 60rpx);
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
    }

    .flex4 {
        width: 95%;
        width: calc(95% - 40rpx);
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
    }

    .text5 {
        width: 99%;
        width: calc(99% - 40rpx);
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
    }

    .VerticalNav.nav {
        width: 180upx;
        white-space: initial;
    }

    .VerticalNav.nav .cu-item {
        width: 100%;
        text-align: center;
        margin: 0;
        border: none;
        height: 50px;
        position: relative;
    }

    .VerticalNav.nav .cu-item.cur::after {
        content: "";
        width: 8upx;
        height: 70upx;
        position: absolute;
        background-color: currentColor;
        top: 0;
        left: 0upx;
        bottom: 0;
        margin: auto;
    }

    .VerticalBox {
        display: flex;
    }

    .tab1 {}
</style>